<template>
  <div class="warp">
    <!-- 分类页 -->
  <van-sidebar v-model="activeKey">
  <van-sidebar-item
  dot
  :title="cate.name"
  v-for="(cate,index) in cates"
  :key="index"
  @click="switchCate(index)" />
  </van-sidebar>
  <!-- 右边的商品列表 -->
  <div class="right">
    <div class="num">此商品分类下共有{{items.length}}件商品</div>
    <!-- 没有商品的时候，显示 -->
    <div class="no" v-if="!items.length">
      <img src="http://bpic.588ku.com/element_origin_min_pic/19/11/14/64a504720dd296b62230a268fea4ea47.jpg" alt="">
      <p>soory!!!</p>
      <p>此商品下暂无数据！敬请等待商家上架商品。</p>
    </div>
    <!-- 遍历出商品的数据 -->
    <div class="item" v-for="(item,index) in items" :key="index">
        <div class="item-left">
          <img :src="item.pic" alt="">
        </div>
        <div class="item-right">
          <h3 class="name" style="font-family:'隶书';font-size:50px;color:yellow">{{item.name}}</h3>
          <p class="desc">
            商品描述：{{ item.characteristic ? item.characteristic :'暂无描述' }}
          </p>
          <div class="action">
            <span class="price" style="color:red">
              ￥ {{item.minPrice}}
            </span>
            <van-icon @click.stop="addCart(item)" color="#f66" size="24" class-prefix="icon" name="jia-tianchong" />
          </div>
        </div>
    </div>
  </div>
  </div>
</template>

<script>
import CommonHead from '../../components/CommonHead.vue'
import { fetchItems, fetchCates } from '@api'
export default {
  data () {
    return {
      activeKey: 0,
      num: 0,
      cates: [],
      items: []
    }
  },
  // 调用请求分类的数据
  created () {
    this.fetchCates()
  },
  methods: {
    fetchItems () {
      this.items = []
      fetchItems({
        categoryId: this.cates[this.num].id
      }).then(res => {
        if (res.data.code === 0) {
          // 得到响应数据时，存放进items数组中
          this.items = res.data.data
        }
      })
    },
    switchCate (index) {
      this.num = index
      this.fetchItems()
    },
    fetchCates () {
      // 请求所有分类
      fetchCates().then(res => {
        if (res.data.code === 0) {
          this.cates = res.data.data
          this.fetchItems()
        }
      })
    }
  },
  components: {
    // eslint-disable-next-line vue/no-unused-components
    CommonHead
  }
}
</script>

<style lang="scss" scoped>
.warp{
  margin-top: 100px;
  margin-bottom: 50px;
  display: flex;
  .van-sidebar-item{
    float: left;
    border-bottom:1px pink solid;
  }
}
.right{
  flex: 1;
  border-left: 1px pink solid;
  .item{
    background: pink;
    border-radius: 80px;
    text-align: center;
  }
  img{
    width: 100%;
  }
}
.no{
  p{
    margin-top: 20px;
    text-align: center;
    color: red;
  }
}
.num{
  text-align: center;
  color: red;
  border-radius: 50px;
  background: pink;
}
</style>
